<template>
  <div class="about">
    <el-container>
      <el-main style="margin-top:90px;padding: 0">
        <div style="width: 1200px;margin: 5px auto;padding:0">
          <div style="padding: 0;margin:0" >
            <el-breadcrumb separator-class="el-icon-zoom-in" style="margin-top: 0" >
              <el-breadcrumb-item >筛选 | </el-breadcrumb-item>
              <el-breadcrumb-item v-for="brand in selectedBrands">{{brand}}</el-breadcrumb-item>
              <el-breadcrumb-item v-for="series in selectedSeries">{{series}}</el-breadcrumb-item>
              <el-breadcrumb-item v-for="price in selectedPrices">{{price}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div >
            <el-row>
              <!--                             这里调高度      -->
              <el-col span="20"  style="height: 1400px">
                <el-row style="height: 185px;width: 920px;margin-top: 10px;margin-bottom: 5px;border: 1px solid #DCDFE6">

                  <el-row style="height: 45px;width: 920px">
                    <el-col :span="24">
                      <div style="margin-top: 11px">
                        <div class="screen">品牌：</div>
                        <div style="float: left">
                          <el-checkbox-group v-model="selectedBrands" @change="onBrandChange">
                            <el-checkbox v-for="brand in brands.slice(0, 8)" :key="brand" :label="brand">{{ brand }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>
                  <el-row style="height: 45px;width: 920px">
                    <el-col :span="24">
                      <div style="margin-top: 11px">
                        <div class="screen">车系：</div>
                        <div style="float: left">
                          <el-checkbox-group v-model="selectedSeries" @change="onSeriesChange">
                            <el-checkbox v-for="series in filteredSeries.slice(0, 8)" :key="series.label" :label="series.label">
                              {{ series.label }}
                            </el-checkbox>
                          </el-checkbox-group>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>
                  <el-row style="height: 45px;width: 920px">
                    <el-col :span="24">
                      <div style="margin-top: 11px">
                        <div class="screen">价格：</div>
                        <div style="float:left;">
                          <el-checkbox-group v-model="selectedPrices" @change="onPriceChange" max="1">
                            <el-checkbox v-for="price in prices" :key="price" :label="price">{{ price }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>
                  <el-row style="height: 45px;width: 920px">

                    <el-col :span="24">
                      <div style="margin-top: 11px;margin-bottom: 11px">
                        <div class="screen" >其他：</div>
                        <div style="float:left">

                        </div>
                      </div>
                    </el-col>

                  </el-row>
                </el-row>


                <div style="height: 50px;width: 990px">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <div id="a-set" style="height: 13px;width: auto;font-size: 13px;margin-bottom: 10px">
                      <a href="">默认排序</a>
                      <a href="">车龄</a>
                      <a href="">价格</a>
                      <a href="">里程</a>
                      <a href="">最新</a>
                    </div>
                    <div  style="height: 1100px;width: 950px;margin-top: 5px">
                      <el-row gutter="10" >
                        <el-col span="6" v-for="(car, index) in cars" :key="index" style="margin-top: 10px" >
                          <a href="javascript:void(0)" @click="cardClick(car.id)"  class="card-hover" @mouseenter="showButton(index)" @mouseleave="hideButton(index)">
                            <el-card shadow="hover" style="border-radius: 0px;height: 316px"  :body-style="{ padding: '0px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }">

                              <!-- 添加收藏按钮 -->
                              <div class="float-right" v-show="car.showButton" >
                                <el-button v-if="Favorite(car.id)" plain icon="el-icon-star-off" @click="addFavorite" class="favorite">收藏</el-button>
                                <el-button v-else plain icon="el-icon-star-on" @click="delFavorite" class="favorite" style="color: #d70000;background-color: #d3dce6">已收藏</el-button>
                              </div>

                              <div style="display: flex; justify-content: center;">
                                <img :src="car.url" style="height: 166px; object-fit: contain;">
                              </div>

                              <div style="padding: 10px">
                                  <div class="card-title" v-text="car.title" style="font-size: 16px;line-height: 25px"></div>
                                  <div style="margin:7px 0 7px 0;color: #999;font-size: 13px">
                                    <span v-text="car.registration"></span>/
                                    <span v-text="car.mileage"></span>/
                                    <span v-text="car.address"></span>
                                  </div>
                                  <div style="color: #d70000; font-size: 14px;margin-top: 15px">
                                    <div style="float: left">
                                      首付
                                      <span v-text="(car.listPrice*0.2).toFixed(1)" style="font-size:22px;font-weight: bolder"></span>
                                      万
                                    </div>
                                    <div style="float: left;margin-top: 8px;margin-left: 20px">
                                      全款
                                      <span v-text="car.listPrice" style="font-size: 10px"></span>
                                      万
                                    </div>

                                  </div>
                              </div>
                            </el-card>
                          </a>
                        </el-col>

                      </el-row>
                        <!--       分页在这里               -->
                      <div style="margin-top: 20px;text-align: center">
                        <el-pagination
                            @current-change="changePage"
                            layout="total, prev, pager, next"
                            :hide-on-single-page="true"
                            :page-size="pageSize"
                            :current-page="currentPage"
                            :total="total">
                        </el-pagination>
                      </div>

                    </div>
                    <el-tab-pane label="全国二手车" name="first">
                    </el-tab-pane>
                    <el-tab-pane label="商户车源" name="second">
                    </el-tab-pane>
                    <el-tab-pane label="个人车源" name="third">
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-col>
              <!--      广告位        -->
              <el-col span="4"  style="height: 1000px">
                <div id="advertisement">
                  推荐好车
                </div>
                <div v-for="(car,index) in cars.slice(0,5)">
                  <a href="" id="advertisement-card">
                    <el-card shadow="hover" style="height: 210px;width: 198px" :body-style="{ padding: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
                      <img :src="car.url" width="100%">
                      <div style="margin-top: 10px;margin-left: 10px;">
                        <div id="advertisement-title" style="font-size: 16px;line-height: 25px;height: 25px;
                             overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
                             v-text="car.title"></div>
                        <div style="margin:7px 0 7px 0;color: #999;font-size: 13px">
                          <span v-text="car.registration"></span>/
                          <span v-text="car.mileage"></span>
                        </div>
                        <span v-text="car.address" style="float: right;color: #999;font-size: 13px;margin-top: 5px"></span>
                        <div style="color: #d70000; font-size: 14px;font-weight: bolder">
                          ￥
                          <span v-text="car.listPrice" style="font-size: 10px"></span>
                          万
                        </div>
                      </div>
                    </el-card>
                  </a>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import axios from "axios";

export default {
  data() {
    return {
      // 分页相关数据
      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      pageSize: 12,
      total: 0,

      user:{
        favorite: [1,2,3,4]
      },
      activeIndex: '1',
      activeIndex2: '1',
      activeName: 'first',
      cars:[
        {
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },
        {
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },
        {
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },
        {
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },{
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },
        {
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },{
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },
        {
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },{
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },
        {
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },{
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },
        {
          id: 3,
          title:"宝马5系 530Li 2.0T 自动 改款尊享型M运动套装 ",
          registration:"2023年6月",
          mileage:"2.0万公里",
          address:"上海",
          listPrice:"50.5",
          firstPrice:"",
          showButton:false, // 默认情况下按钮隐藏
        },

      ],

      brands: ['宝马', '奔驰', '奥迪', '保时捷','本田','丰田','领克','传祺'],
      series: [
        { brand: '宝马', label: '3系' },
        { brand: '宝马', label: '5系' },
        { brand: '宝马', label: '7系' },
        { brand: '奔驰', label: 'C级' },
        { brand: '奔驰', label: 'E级' },
        { brand: '奔驰', label: 'S级' },
        { brand: '奥迪', label: 'A4L' },
        { brand: '奥迪', label: 'A6L' },
        { brand: '奥迪', label: 'Q5' },
        { brand: '保时捷', label: 'Panamera' },
        { brand: '保时捷', label: 'Cayenne' },
        { brand: '保时捷', label: 'Macan' }
      ],
      prices: ['3万以下', '3-5万', '5-8万', '8-12万', '12-15万','15-20万','20-30万','30万以上'],
      vehicles: [
        { brand: '宝马', series: '3系', price: '25万' },
        { brand: '宝马', series: '5系', price: '40万' },
        { brand: '宝马', series: '7系', price: '80万' },
        { brand: '奔驰', series: 'C级', price: '30万' },
        { brand: '奔驰', series: 'E级', price: '50万' },
        { brand: '奔驰', series: 'S级', price: '100万' },
        { brand: '奥迪', series: 'A4L', price: '30万' },
        { brand: '奥迪', series: 'A6L', price: '50万' },
        { brand: '奥迪', series: 'Q5', price: '40万' },
        { brand: '保时捷', series: 'Panamera', price: '150万' },
        { brand: '保时捷', series: 'Cayenne', price: '120万' },
        { brand: '保时捷', series: 'Macan', price: '80万' }
      ],
      selectedBrands: [],
      selectedSeries: [],
      selectedPrices: [],

    }
  },
  filters: {
    decimalFilter(value) {
      return value.toFixed(3);
    },
  },
  computed: {
    filteredSeries() {
      if (this.selectedBrands.length === 0) {
        return this.series;
      }

      return this.series.filter((s) => {
        return this.selectedBrands.indexOf(s.brand) !== -1;
      });
    },
    filteredVehicles() {
      const brands = this.selectedBrands;
      const series = this.selectedSeries;
      const prices = this.selectedPrices;

      if (brands.length === 0 || series.length === 0 || prices.length === 0) {
        return [];
      }

      return this.vehicles.filter((v) => {
        return brands.indexOf(v.brand) !== -1 &&
            series.indexOf(v.series) !== -1 &&
            prices.indexOf(this.getPriceRange(v.price)) !== -1;
      });
    }
  },
  methods: {
    // 切换分页
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.loadCarList();
    },
    // 加载文章列表
    loadCarList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let _this=this;
      _this.http.get('/xiaoming-cars/content/cars?page='+page).then(function (response) {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          _this.cars = jsonResult.data.list;
          _this.currentPage = jsonResult.data.currentPage;
          _this.pageSize = jsonResult.data.pageSize;
          _this.total = jsonResult.data.total;
        }
      }).catch(error => {
        let title = '抱歉';
        let message = '部分功能尚未完善';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
  },
    showButton(index){
      this.cars[index].showButton=true;
    },
    hideButton(index){
      this.cars[index].showButton=false;
    },
    Favorite(carId){
      for (let i = 0; i < this.user.favorite.length; i++) {
        if (this.user.favorite[i]===carId){
          return false;
        }
      }
      return true;
    },
    addFavorite(){
      //添加收藏请求

    },
    delFavorite(){
      //删除收藏请求

    },
    showDetail(){

    },


    handleSelect(key, keyPath) {//key代表的是上面index的值
      console.log(key, keyPath);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },

    cardClick(id) {
      console.log(id);
      this.$router.push('/product/detail?id='+id)
    },


    onBrandChange() {
      this.selectedSeries = [];
    },
    onSeriesChange() {
      this.selectedPrices = [];
    },
    onPriceChange() {
      // do nothing
    },
    getPriceRange(price) {
      if (price < 100000) {
        return '10万以下';
      } else if (price < 200000) {
        return '10万-20万';
      } else if (price < 300000) {
        return '20万-30万';
      } else if (price < 500000) {
        return '30万-50万';
      } else {
        return '50万以上';
      }
    }
  },
  mounted(){
  this.loadCarList();
  },
}
</script>


<style>
.ccc{
  border: 2px solid #0aa1ed
}
a{
  text-decoration: none;
}
.c1{
  height: 85px/*;border: 2px solid #0aa1ed*/;border-radius: 5px;

}
.header-set{
  width: 1200px;height: 85px;margin: 0 auto;padding: 0;
}
.brand a{
  line-height: 30px;
  width: 30px;
  text-decoration: none;
  color:#333;
}
.brand a:hover{
  color: #f29600;
}
.brand p{
  padding: 0;margin: 0;font-weight: bold;font-size: 20px
}
.second_main:hover .second_main_p1{
  color:#f29600;
}
.three_a:hover .three-p{
  color:#f29600;
}
.el-tabs__item.is-active {
  color: #f29600;
}
.el-tabs__active-bar{
  background-color: #f29600;
}
.el-tabs__item:hover {
  color: #f29600;
  cursor: pointer;
}
.el-tabs__item.is-active {
  color: #f29600;
}
.header-set .el-input__inner{
  border: 1px solid #f29600;
  border-radius: 0;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border:2px solid #f29600;
  outline: 0;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #f29600;
  color: #303133;
}

.el-submenu.is-active .el-submenu__title {
  border-bottom-color: #f29600;
}
.el-input-group__append, .el-input-group__prepend{
  color: #f29600;
  border: 2px solid #f29600;
  border-radius: 0;
}


.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #f29600;
  color: #303133;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #f29600;
  color: #f29600;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #f29600;
  border-color: #f29600;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
  font-weight: bolder;
  color: #303133;
}
.el-checkbox__inner:hover {
  border-color: #f29600;
}

.el-submenu.is-active .el-submenu__title {
  border-bottom-color: #f29600;
}

#breadcrumb {
  font-size: 10px;
}
.el-tabs__item{
  font-size: 16px;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0;
}
.screen{
  float: left;
  margin-left: 10px;
}
.el-main {
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: visible;
  box-sizing: border-box;
}
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
  color: #f29600;
  cursor: pointer;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f29600;
  color: #FFF;
}

.card-hover:hover {
  position:relative;
  top: -5px;
}
.card-hover:hover .card-title{
  color: #d70000;
}
#advertisement{
  font-size: 16px;
  color: #666;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  background-color: #fafafa;
  border-bottom: 1px solid #f3f3f3;
  position: relative;
}
#advertisement-title{
  font-size: 16px;line-height: 25px;height: 25px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#advertisement-card:hover #advertisement-title{
  color: #f29600;
}
.favorite{
  width: 100px;
  border-radius: 0;
  opacity: 0.75;
}

.el-button.is-plain:focus, .el-button.is-plain:hover {
  background: #FFF;
  /* border-color: #409EFF; */
  /* color: #409EFF; */
}

.el-button:focus, .el-button:hover {
  color: #d70000;
  border-color: #d70000;
}
.el-button.is-active, .el-button.is-plain:active {
  color: #d70000;
  border-color:#d70000;
}
.float-right {
  height: 0;
  position: relative;
  z-index: 9999;
  margin-left: 128px;
}
#a-set a{
  text-decoration: none; /* 去除下划线 */
  color: #333;
  margin-right: 20px;
}
#a-set a:hover{
  color: #f29600;
}
</style>